<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('入库统计详情')"/>
    <style>
        [v-cloak] {
            display: none
        }
        .el-dialog__header, .el-dialog__body {
            padding: 0!important;
        }
        .el-dialog {
            margin-top: 25px!important;
        }
    </style>
</head>
<body>
<div class="container-div">
    <el-row :gutter="20">
        <el-col :span="24">
            <el-tabs type="border-card" class="deer-panel" style="margin-top: 15px;padding-top: 0">
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-date"></i> 单晶详情</span>
                    <el-table :data="item.list" border stripe height="460" style="width: 100%">
                        <el-table-column prop="materialId" label="钢卷编号" align="center" width="250"></el-table-column>
                        <el-table-column prop="materialProduct" label="物料编码" align="center" width="125"></el-table-column>
                        <el-table-column prop="workShop" label="钢卷组合" align="center" width="250"></el-table-column>
                        <el-table-column prop="specId" label="钢卷规格" align="center" width="120"></el-table-column>
                        <el-table-column prop="materialCategory" label="客户等级" align="center" width="90"></el-table-column>
                        <el-table-column prop="materialPN" label="PN型" align="center" width="90"></el-table-column>
                        <el-table-column label="钢卷类型" align="center" width="90">
                            <template slot-scope="scope">
                                <span v-if="scope.row.assemblyType==1">整棒</span>
                                <span v-if="scope.row.assemblyType==2">二拼</span>
                                <span v-if="scope.row.assemblyType==3">三拼</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="resistance" label="电阻率" align="center" width="100"></el-table-column>
                        <el-table-column prop="rareMetal" label="掺杂剂" align="center" width="90"></el-table-column>
                        <el-table-column prop="brickLength" label="钢卷长度（mm）" align="center" width="85"></el-table-column>
                        <el-table-column prop="weight" label="钢卷重量（kg）" align="center" width="85"></el-table-column>
                        <el-table-column prop="diameter" label="直径（mm）" align="center" width="75"></el-table-column>
                        <el-table-column prop="sideLength" label="边长（mm）" align="center" width="75"></el-table-column>
                        <el-table-column prop="comment" label="备注" align="center" width="300"></el-table-column>
                        <el-table-column prop="color" label="颜色" align="center" width="95"></el-table-column>
                        <el-table-column align="center" label="操作" v-if="editState" width="80">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="editMsg(scope.row.id)" plain>修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @current-change="chengCurrentPage"
                        :current-page="item.currentPage"
                        :page-size="item.pageSize"
                        layout="prev, pager, next"
                        :total="item.total">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
    <el-dialog :visible.sync="innerVisible" :close-on-click-modal="false" :show-close="false" append-to-body>
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-msg-edit">
                <input id="id" name="id" type="hidden" v-model="msg.id"/>
                <input id="carrierId" name="carrierId" type="hidden" v-model="msg.carrierId"/>
                <div class="form-group">
                    <label class="col-sm-3 control-label">钢卷编号：</label>
                    <div class="col-sm-8">
                        <input id="materialId" name="materialId" v-model="msg.materialId" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">物料编码：</label>
                    <div class="col-sm-8">
                        <input id="materialProduct" name="materialProduct" v-model="msg.materialProduct" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">钢卷组合：</label>
                    <div class="col-sm-8">
                        <input id="workShop" name="workShop" v-model="msg.workShop" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">钢卷规格：</label>
                    <div class="col-sm-8">
                        <input id="specId" name="specId" v-model="msg.specId" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">客户等级：</label>
                    <div class="col-sm-8">
                        <select name="materialCategory" class="form-control" v-model="msg.materialCategory">
                            <option value="A">A</option>
                            <option value="A+H">A+H</option>
                            <option value="A-">A-</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">PN型：</label>
                    <div class="col-sm-8">
                        <select name="materialPN" class="form-control" v-model="msg.materialPN">
                            <option value="P">P</option>
                            <option value="N">N</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">类型：</label>
                    <div class="col-sm-8">
                        <select name="assemblyType" class="form-control" v-model="msg.assemblyType">
                            <option value="1">整棒</option>
                            <option value="2">二拼</option>
                            <option value="3">三拼</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">电阻率：</label>
                    <div class="col-sm-8">
                        <input id="resistance" name="resistance" v-model="msg.resistance" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">掺杂剂：</label>
                    <div class="col-sm-8">
                        <input id="rareMetal" name="rareMetal" v-model="msg.rareMetal" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">钢卷长度（mm）：</label>
                    <div class="col-sm-8">
                        <input id="brickLength" name="brickLength" v-model="msg.brickLength" class="form-control" type="number">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">入库钢卷长度（mm）：</label>
                    <div class="col-sm-8">
                        <input id="stockInLength" name="stockInLength" v-model="msg.stockInLength" class="form-control" type="number">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">入库重量（kg）：</label>
                    <div class="col-sm-8">
                        <input id="weight" name="weight" v-model="msg.weight" class="form-control" type="number">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">直径（mm）：</label>
                    <div class="col-sm-8">
                        <input id="diameter" name="diameter" v-model="msg.diameter" class="form-control" type="number">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">边长（mm）：</label>
                    <div class="col-sm-8">
                        <input id="sideLength" name="sideLength" v-model="msg.sideLength" class="form-control" type="number">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-8">
                        <input id="comment" name="comment" v-model="msg.comment" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">颜色：</label>
                    <div class="col-sm-8" style="display: flex">
                        <input id="color" name="color" v-model="msg.color" class="form-control" type="text" style="width: 75%;" placeholder="请选择颜色">
                        <input type="color" style="width: 25%;height: 34px" v-model="msg.color">
                    </div>
                </div>
            </form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeInnerVisible()">取消</el-button>
            <el-button type="primary" @click="commitItems()">确定</el-button>
        </div>
    </el-dialog>
</div>

<div th:include="include::footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "in/MaterialInfo";
    var detailPrefix = ctx + "in/MaterialDetail";

    var carrierId = localStorage.getItem(prefix+'/detail');
    var editState = localStorage.getItem('inMaterialInfoEditFlag');

    var vue = new Vue({
        el: '.container-div',
        data: {
            item: {
                currentPage: 1,
                pageSize: 8,
                total: '',
                list: []
            },
            editState: '',
            innerVisible: false,
            msg: {}
        },
        methods: {
            //分页
            chengCurrentPage: function(currentPage){
                this.item.currentPage = currentPage;
                this.getDetails(null);
            },
            //单晶信息列表
            getDetails(){
                var that = this;
                $.ajax({
                    url: detailPrefix + "/findMaterialDetailList",
                    type: "POST",
                    data: {
                        carrierId: carrierId,
                        pageSize: that.item.pageSize,
                        pageNum: that.item.currentPage
                    },
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.item.list = data.rows;
                        that.item.total = data.total;
                    }
                })
            },
            //获取某单晶信息
            editMsg(id){
                var that = this;
                $.ajax({
                    url: "/in/MaterialDetail/editdetail",
                    type: "POST",
                    data: {
                        id: id
                    },
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.msg = data;
                    }
                })
                this.innerVisible = true;
            },
            //Dialog取消按钮
            closeInnerVisible(){
                this.innerVisible = false;
                this.msg = {};
            },
            //Dialog确定按钮
            commitItems(){
                var that = this;
                $.ajax({
                    url: "/in/MaterialDetail/editdetailsave",
                    type: "POST",
                    data: $('#form-msg-edit').serialize(),
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.closeInnerVisible();
                        that.getDetails();
                    }
                })
                // if($.validate.form()){
                //     $.operate.save("/in/MaterialDetail/editdetailsave", $('#form-msg-edit').serialize());
                // }
            }
        },
        created(){
            if(editState == 'open'){
                this.editState = true;
            }else if(editState == 'close'){
                this.editState = false;
            }
            this.getDetails();
        }
    })
</script>
</body>
</html>
